<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;

    }

    #app {
      width: 100vw;
      min-height: 100vh;
      background-image: url('./images/bg.png');
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      padding-bottom: 150px;
    }

    .logo {
      width: 45%;
      position: absolute;
      left: 50%;
      top: 20%;
      transform: translateX(-50%);

    }

    .content {
      width: 100%;
      padding: 0 50px 20px;
      box-sizing: border-box;
    }

    .box {
      display: flex;
      justify-content: space-between;
    }

    .tian {
      flex: 1;
      height: auto;
      position: relative;


    }

    .tian .title {
      width: 50%;
      margin-bottom: 20px;
      margin-left: 25%;
    }
    .mo .title {
      width: 50%;
      margin-bottom: 20px;
      margin-left:  18%;
    }
    .tian .data-avatar-mo {
      width: 200px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 0;
      transform: translate(15%, -30%);
    }

    .tian .data-avatar {
      width: 200px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      transform: translate(-25%, -30%);
    }

    .tian .data {
      width: 90%;
      height: calc(100% - 75px);

      padding: 10px 10px 10px 0;
      background-size: 100% 100%;
      box-sizing: border-box;
      margin-left: 7%;
      border: 25px solid #000000;
      border-image-source: url('./images/border.png');
      border-image-slice: 50 50 50 50;
      border-image-repeat: round;
    }

    .mo .data {
      width: 90%;
      padding:10px 10px 10px 0;
      background-size: 100% 100%;
      margin-left: 0;
      margin-right: 7%;
      border: 25px solid #000000;
      border-image-source: url('./images/border.png');
      border-image-slice: 50 50 50 50;
      border-image-repeat: round;

    }

    .tian .data .thead {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .tian .data .thead .th {
      background-image: url('./images/tian-head.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-right: 4px;
      padding: 0 10px;
      box-sizing: border-box;
    }

    .mo .data .thead .th {
      background-image: url('./images/mo-head.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-right: 4px;
      padding: 0 10px;
      box-sizing: border-box;

    }

    .tian .data .tbody {
      position: relative;
      z-index: 2;
    }

    .tian .data .tbody .tr {
      display: flex;
      align-items: center;

    }

    .tian .data .tbody .tr .td {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      background-color: #000000;
      margin-right: 4px;
      border: 1px solid #5d5d5b;
      border-top: 0;
      box-sizing: border-box;
      padding: 0 10px;
      text-align: justify;

    }

    .tian .data .tbody .tr .td .team-logo {
      width: 100%;
    }

    .foot {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
    }

    .col3 {
      flex: 3;
    }

    .col2 {
      flex: 2;
    }

    .col7 {
      flex: 7;
    }
  </style>
</head>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<body>
  <div id="app">
    <img class="logo" src="./images/logoName.png" alt="">
    <div class="content">
      <div class="box">
        <div class="tian">
          <img src="./images/tian.png" alt="" class="title">
          <img class="data-avatar" src="./images/tian-avatar.png" alt="">
          <div class="data">
            <div class="thead">
              <div class="th col3">軍團圖標</div>
              <div class="th col2">軍團名稱</div>
              <div class="th col7">軍團介紹</div>
              <div class="th col2">YY頻道</div>
            </div>
            <div class="tbody">
              <div class="tr" v-for="(item,index) in tian" :key="index+'tian'">
                <div class="td col3">
                  <img class="team-logo" :src="'http://103.194.104.229'+item.image" alt="">
                </div>
                <div class="td col2">{{item.name.length>10?item.name.slice(0,10)+'...':item.name}}</div>
                <div class="td col7">{{item.content.length>42?item.content.slice(0,42)+'...':item.content}}</div>
                <div class="td col2" ><a :href="'http://'+item.yyUrl" style="color: #fff;">{{item.yy.length>12?item.yy.slice(0,12)+'...':item.yy}}</a></div>

              </div>
            </div>
          </div>
        </div>
        <div class="tian mo">
          <img src="./images/mo.png" alt="" class="title">
          <img class="data-avatar-mo" src="./images/mo-avatar.png" alt="">
          <div class="data">
            <div class="thead">
              <div class="th col3">軍團圖標</div>
              <div class="th col2">軍團名稱</div>
              <div class="th col7">軍團介紹</div>
              <div class="th col2">YY頻道</div>
            </div>
            <div class="tbody">
              <div class="tr" v-for="(item,index) in mo" :key="index+'mo'">
                <div class="td col3">
                  <img class="team-logo" :src="'http://103.194.104.229'+item.image" alt="">
                </div>
                <div class="td col2">{{item.name.length>10?item.name.slice(0,10)+'...':item.name}}</div>
                <div class="td col7">{{item.content.length>42?item.content.slice(0,42)+'...':item.content}}</div>
                <div class="td col2" ><a :href="'http://'+item.yyUrl" style="color: #fff;">{{item.yy.length>12?item.yy.slice(0,12)+'...':item.yy}}</a></div>
               </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
    <img src="./images/foot.png" alt="" class="foot">
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        tian: [],
        mo: []
      },
      mounted() {
        this.getData()
      },
      methods: {
        getData() {
          axios.get('http://103.194.104.229/index/index/itemData').then(res => {
            console.log(res)
            if (res.data.code == 200) {
              this.mo = res.data.data.mozu
              this.tian = res.data.data.tianzu
            }
          }).catch(err => {
            console.log(err)
          })
        }
      }

    })
  </script>
</body>

</html>